<template>
    <div class="map_box" style="z-index: 2;  overflow: hidden;">
        <div id="container"></div>
        <div class="cover">
            <el-radio-group v-model="radio" size="mini" @change="draw">
                <el-radio v-for="(item) of radioGroup" :key="item.value" :label="item.value" border>{{item.name}}</el-radio>
            </el-radio-group>
            <div class="input-item">
                <el-button type="primary" round @click="clearDraw">清除</el-button>
                <el-button type="primary" round @click="closeDraw">关闭绘图</el-button>
            </div>
        </div>
        <pop v-if="isShow" @listenChild="listenChild"></pop>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    import pop from "./pop";

    export default {
        components: {
            pop,
        },
        data() {
            return {
                map: null,
                maker: null,
                marker: [118.118174, 24.468552],
                icon: null,
                isShow: false,
                out: true,
                mapModule: null,
                radioGroup: [
                    {name: '画点', value: 'marker'},
                    {name: '画折线', value: 'polyline'},
                    {name: '画多边形', value: 'polygon'},
                    {name: '画矩形', value: 'rectangle'},
                    {name: '画圆', value: 'circle'},
                ],
                radio: 'marker',
                mouseTool: null, //覆盖物
                overlays: [], // f覆盖物数组
            };
        },
        mounted() {
            //DOM初始化完成进行地图初始化
            this.initMap();
        },
        destroyed() {
            this.map.destroy();
            this.map = null;
            // this.mapModule.dispose();
            this.mapModule = null;
            console.log("==================destroyed==================");
        },

        methods: {
            listenChild(e) {
                this.isShow = e;
            },
            clickApp(e) {
                console.log(e);
                this.isShow = true;
            },
            initMap() {
                AMapLoader.load({
                    key: "a503f62db84dba58af028cf80401f4ca", // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: ["AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                })
                    .then((AMap) => {
                        this.mapModule = AMap;
                        this.map = new AMap.Map("container", {
                            //设置地图容器id
                            viewMode: "3D", //是否为3D地图模式
                            zoom: 14, //初始化地图级别
                            // mapStyle: 'amap://styles/macaron',
                            center: [118.126078, 24.459206], //初始化地图中心点位置
                        });
                        this.icon = new AMap.Icon({
                            image:
                                "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // Icon的图像
                            offset: new AMap.Pixel(-13, -30),
                        });
                        // 将 icon 传入 marker
                        this.maker = new this.mapModule.Marker({
                            position: new AMap.LngLat(118.126078, 24.459206),
                            icon: this.icon,
                            offset: new AMap.Pixel(-13, -30),
                        });
                        this.maker.on("click", this.clickApp);
                        this.map.add(this.maker);
                        this.mouseTool = new this.mapModule.MouseTool(this.map);
                        this.mouseTool.on('draw', this.drawOverlays);
                        this.draw('marker');
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },
            drawOverlays(e) {
                console.log(e.obj.getPath());//获取路径
                this.overlays.push(e.obj);
            },
            draw(type) {
                // console.log(type)
                switch (type) {
                    case 'marker': {
                        this.mouseTool.marker({
                            //同Marker的Option设置
                        });
                        break;
                    }
                    case 'polyline': {
                        this.mouseTool.polyline({
                            strokeColor: '#80d8ff'
                            //同Polyline的Option设置
                        });
                        break;
                    }
                    case 'polygon': {
                        this.mouseTool.polygon({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'rectangle': {
                        this.mouseTool.rectangle({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'circle': {
                        this.mouseTool.circle({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Circle的Option设置
                        });
                        break;
                    }
                }
            },
            // var radios = document.getElementsByName('func');
            // for (var i = 0; i < radios.length; i += 1) {
            //     radios[i].onchange = function (e) {
            //
            //         draw(e.target.value)
            //     }
            // }
            // draw('marker')

            clearDraw() {
                this.map.remove(this.overlays)
                this.overlays = [];
            },
            closeDraw() {
                this.mouseTool.close(true);//关闭，并清除覆盖物
                this.radio= '';
            }
        },
    }
    ;
</script>
<style scoped>
    .map_box {
        /*position: absolute;*/
        /*top: -30px;*/
        width: 100%;
        /*border-radius: 50%;*/
    }

    #container {

        padding: 0px;
        margin: 0px;
        width: 100%;
        /*height: 100vh ;*/
        height: calc(100vh - 4.4rem);

    }

    .cover {
        position: absolute;
        top: 10px;
        background-color: #ffffff;
        z-index: 15;
        width: 300px;
        padding: 10px;
        /*height: 40px;*/
        /*border: 2px solid #265abf;*/
        right: 10px;
        box-shadow: 0 0 10px 0 rgba(203, 203, 203, 0.3);
        border-radius: 5px;
    }

    .cover .el-radio {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    /deep/ .cover .el-radio.is-bordered + .el-radio.is-bordered {
        margin-left: 0;
    }

    /deep/ .cover .input-item .el-button.is-round {
        padding: 5px 10px;
    }

    .cover .input-item {
        /*text-align: right;*/
        display: flex;
        justify-content: space-around;
    }
</style>
